import {Component} from 'react'
import './Tab.css'
class Tab extends Component{
    constructor(props) {
        super()
        this.state = {
            current: 0
        }
    }
    render() {
        return (
            <div className='tab'>
                <ul>
                   {
                       this.props.list.map((item,i) => {
                           return <li key={i} style={{
                                color: i === this.state.current ? '#FFF' : "#333",
                                background :i === this.state.current ? "blue" : '#FFF'
                           }} onClick = {
                              () => {
                                  this.setState({
                                      current:i
                                  })
                                  this.props.fn(item.status)
                              }
                           }>{item.name}</li>
                       })
                   }
                </ul>
            </div>
        )
    }
}

export default Tab